<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head th:replace="_fragment::head(~{::title},~{})">
		<title>文章</title>
	</head>
	<body>
		<!-- 头部导航栏 -->
		<div th:replace="_fragment::blog-header('article')"></div>
		
		<div class="blog-content">
			<div class="layui-container">
				<div class="layui-row">
					<!--左侧-->
					<div class="layui-col-md8">
						<div id="cards"></div>
						<!-- 分页DIV -->
						<div id="page-util" class="page-box"></div>
					</div>
					<!--右侧-->
					<div class="layui-col-md4">
						<!-- 搜索栏 -->
						<div class="input-box animated bounceInRight">
							<input type="search" id="s_keyword" name="s_keyword" class="layui-input" placeholder="请输入搜索关键字"/>
							<button type="button" class="layui-btn" id="btn_search">
							  <i class="layui-icon layui-icon-search"></i>
							</button>
						</div>
						 <!-- 分类 -->
						<div class="base-card animated bounceInRight delay-1s">
							<div class="base-card-header">
								<i class="fa fa-folder-o"></i>
								分类
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div class="c-nav" id="category"></div>
							</div>
						</div>
						<!-- 标签 -->
						<div class="base-card animated bounceInRight delay-2s">
							<div class="base-card-header">
								<i class="layui-icon layui-icon-note"></i>
								标签
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div id="tags"></div>
							</div>
						</div>
						
						<!-- 归档 -->
						<div class="base-card animated bounceInRight delay-3s">
							<div class="base-card-header">
								<i class="fa fa-archive"></i>
								归档
								<span style="float: right;">
									<a href="javascript:;">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
							</div>
							<div class="base-card-body">
								<div class="c-nav" id="archive">
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
									<a href="">2020年04月</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部版权区 -->
		<div th:replace="_fragment::blog-footer"></div>

		<link rel="stylesheet" type="text/css" th:href="@{/css/article.css}"/>
		<script type="text/javascript" th:src="@{/js/article.js}"></script>
		<script type="text/javascript" th:src="@{/js/global.js}"></script>
		<script type="text/html" id="articleCard">
			<!-- 文章展示小卡片 -->
			{{# layui.each(d,function(index , item){  }}
			<div class="article-card animated flipInX">
				<div class="article-title">
					<a href="/article/details/{{item.articleId}}">{{item.title}}</a>
					{{# if(item.isOriginal){ }}
					<span class="layui-badge layui-bg-green">原创</span>
					{{# }else{ }}
					<span class="layui-badge">转载</span>
					{{# } }}
				</div>
				<div class="article-abstract">
					<span>{{ item.contentHtml }}</span>
				</div>
				<!-- 卡片底部展示发表时间、用户、分类 和 标签等-->
				<div class="article-bottom">
					<span>
					<i class="layui-icon layui-icon-time"></i>
						{{item.createTime}}
					</span>
					<span>
					<i class="layui-icon layui-icon-username"></i>&nbsp;{{item.user.userName}}
					</span>
					<span>
					<i class="fa fa-folder-o"></i>
					<a href="/article/category/{{item.categoryId}}">{{ item.category.categoryName }}</a>&nbsp;&nbsp;
					</span>
					<span>
					<i class="layui-icon layui-icon-note"></i>&nbsp;
						{{# layui.each(item.tags,function(index,tag){   }}
						<a href="/article/tag/{{tag.tagId}}">{{tag.tagName}}&nbsp;&nbsp;</a>
						{{#  });  }}
					</span>
					<span>
					<!-- 评论数和浏览数 -->
						<i class="fa fa-commenting-o"></i>10
					&nbsp;<i class="fa fa-eye"></i>1000
					</span>
				</div>
			</div>
			{{#    });   }}
		</script>
	</body>
</html>
